<template>
  <el-button link class="toolbar-btn" @click="showPreview" :icon="renderIcon('Eye')">
    {{locale.studio.design.preview}}
  </el-button>
  <!--
  <el-dialog
      v-model="dialogVisible"
      title="预览"
      width="80%"
      @opened="onOpen"
      class="yv-preview fit-height"
      :draggable="true"
      :before-close="closePreview"
      :close-on-press-escape="false"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      :append-to-body="true"
  >
    <component :is="previewComponentName" v-bind="previewComponentProps" class="dialog-preview"/>
  </el-dialog>

  <yv-vjson-dialog
      v-model="dialogVisible"
      title="预览"
      width="70%"
      height="80%"
      @open="onOpen"
      @close="closePreview">
    <component :is="previewComponentName" v-bind="previewComponentProps"/>
  </yv-vjson-dialog>
  -->
</template>

<script>
import _ from 'lodash'
import VJsonContext from '../../runtime/VJsonContext'
import Designer from "./designer"
import {parseJsObject} from "../../utils"
import {defineComponent, h, markRaw} from "vue"
import YvVjsonLayout from "../../components/YvVjsonLayout.vue"
import bizMixin from "../../runtime/bizMixin"
import {renderIcon} from "../../components/web/webutils"
import YvI18nMixin from "@/components/YvI18nMixin";

export default {
  mixins: [YvI18nMixin],
  emits: ["before-review"],
  props: {
    designer: Designer,
    vcxt: VJsonContext,
  },
  data() {
    return {
      dialogVisible: false,
      runtimeVcxt: null,
      previewComponentName: 'div',
      previewComponentProps: {},
    }
  },
  computed: {},
  methods: {
    renderIcon: renderIcon,
    onOpen() {
      console.timeEnd()
    },
    showPreview() {
      const me = this

      const opt = {cancel: false}
      this.$emit('before-review', opt)
      if (opt.cancel) {
        return
      }
      console.time()

      /**
       * 生成 mixins, 定义一个空的 YvVjsonObject 对象 进行预览
       */
      let fileContent = _.trim(this.vcxt.designer.exportFile())
      if (_.startsWith(fileContent, 'export default')) {
        fileContent = fileContent.substring('export default'.length)
      }

      let vexport
      try {
        vexport = parseJsObject(fileContent)
      } catch (e) {
        console.error(e)
        system.showErrorDialog('编译错误, 请修正后再预览', e)
        debugger
        return
      }

      const id = this.designer.spaceIdList[this.designer.spaceCurrentIndex]
      if (!id) {
        system.showErrorDialog("can't found spaceIdList at " + this.designer.spaceCurrentIndex)
        return
      }

      const si = this.designer.spaceInfo[id]
      if (!si) {
        system.showErrorDialog("can't found spaceInfo at " + id)
        return
      }

      const p = si.module.vue.absolutePath
      const _absPath = p.substring(0, p.lastIndexOf('.vue'))

      const idx = _absPath?.indexOf('/src/pages')
      let _relPath
      if (idx > 0) {
        _relPath = _absPath.substring(idx + 4)
      }

      const componentOptions = {
        mixins: [vexport, bizMixin],
        data() {
          return {
            _absPath,
            _relPath
          }
        },
        mounted() {
          console.timeEnd()
        },
        unmounted() {
          window['is_preview_mode'] = false
        },
        render() {
          // return h(YvVjsonObject, {vjson: this.vjson, vcxt: this.vcxt})
          return h(YvVjsonLayout, {vjson: this.vjson, vcxt: this.vcxt})
        }
      }

      window['is_preview_mode'] = true
      system.showDialog(markRaw(defineComponent(componentOptions)), {}).then(res => {
        console.log('then 响应', res)
      })

    },
    closePreview() {
      this.dialogVisible = false
      this.previewComponentName = 'div'
      this.previewComponentProps = {}
    },
  }
}
</script>
<style lang="less">
.dialog-preview.template-one, .dialog-preview.template-two, .dialog-preview.template-three, .dialog-preview.template-four, .dialog-preview.template-five, .dialog-preview.template-six {
  height: 700px;
}
</style>